<template>
	<view class="content">
		<view class='header'>
			<view class='search'>
				<input class="uni-input search-area" focus placeholder="搜索你想了解的用户..." v-model="keyWord" @click="search"/>
			</view>
			<view class='nav'>
				<u-sticky bgColor="#fff" style="width: 100%;">
					<u-tabs itemStyle="width:100px;height:44px" :list="cateList" @click="click"></u-tabs>
				</u-sticky>
			</view>
		</view>

		<!-- 侧滑列表 -->
		<view class="list">
			<view v-if="myConcernList.length || concernList.length" class="list">
				<scroll-view style="height: 25rem;" :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true"
					:refresher-triggered="triggered" :refresher-threshold="100" @refresherrefresh="onRefresh"
					@scrolltolower="lower">
					<view v-if="cate == 0">
						<u-swipe-action v-for="(item) in myConcernList" :key="item.id">
							<u-swipe-action-item :options="action" @click="deleteThis(item.id)">
								<view class="swipe-action u-border-top u-border-bottom">
									<view class="item">
										<view class="business">
											<view class="avatar" @click="goCenter(item.follow.id)">
												<image mode="aspectFit"
													:src="item.follow.avatar_text ? item.follow.avatar_text : '/static/avatar.png'">
												</image>
											</view>
											<view class="author">{{ item.follow.nickname ? item.follow.nickname :
						"默认用户" }}
											</view>
										</view>

										<view class="info">
											<navigator :url="`/pages/business/center?busid={$item.follow.id}`" class="nickname">{{item.follow.nickname}}</navigator>
											<view class="desc">
												{{ item.follow.region_text ? item.follow.region_text : "未知" }}
											</view>
										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
					<view v-else-if="cate == 1">
						<u-swipe-action v-for="item in concernList" :key="item.id">
							<u-swipe-action-item :options="action2" @click="deleteThis(item.id)">
								<view class="swipe-action u-border-top u-border-bottom">
									<view class="item">
										<view class="business">
											<view class="avatar" @click="goCenter(item.fan.id)">
												<image mode="aspectFit"
													:src="item.fan.avatar_text ? item.fan.avatar_text : '/static/avatar.png'">
												</image>
											</view>
											<view class="author">{{ item.fan.nickname }}</view>
										</view>
										<view class="info">
											<navigator :url="`/pages/business/center?busid={$item.fan.id}`" class="nickname">{{item.fan.nickname}}</navigator>
											<view class="desc">
												{{ item.fan.region_text ? item.fan.region_text : "未知" }}
											</view>
										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>

					<!-- <u-back-top :scroll-top="scrollTop"></u-back-top> -->
				</scroll-view>
			</view>
			<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 弹框组件 -->
		<u-modal :show="show" :title="'提醒'" :content="content" showCancelButton :closeOnClickOverlay="true"
			@cancel="show = false" @close="show = false" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			content: '是否确认操作',
			action: [{
				text: '取消关注',
				style: {
					backgroundColor: 'rgb(245, 108, 108)',
				}
			}],
			action2: [{
				text: '拉黑',
				style: {
					backgroundColor: 'rgb(245, 108, 108)',
				}
			}],
			cateList: [
				{
					name: "我的关注",
					id: 0
				},
				{
					name: "我的粉丝",
					id: 1
				},
			],
			storageBusiness: {},
			scrollTop: 0,
			triggered: false,
			page: 1,
			limit: 10,
			cate: 0,
			deleteid: 0,
			keyWord:"",
			myConcernList: [],
			concernList: [],
		}
	},
	onLoad() {
		this.storageBusiness = uni.getStorageSync("business") ?? {}
		this.onRefresh()
	},
	methods: {
		async confirm() {
			this.show = false
			// 判断删除类型
			let data = {
				id: this.deleteid,
				busid : this.storageBusiness.id
			}
			let result = await uni.$u.http.post("/business/deleteConcern", data)
			if (result.code) {
				this.$refs.notice.show({
					message: result.msg,
					duration: 1000,
					complete: () => {
						this.onRefresh()
					}
				})
			} else {
				this.$refs.notice.show({
					message: result.msg
				})
				return false
			}
		},
		click(item) {
			this.cate = item.id
			this.myConcernList = []
			this.concernList = []
			this.page = 1
			this.lower()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onRefresh() {
			if (this._freshing) return;
			this._freshing = true;
			this.triggered = true
			this.page = 1;
			this.myConcernList = []
			this.concernList = []
			this.lower()
		},
		async lower(e) {
			// 发送请求
			let data = {
				busid: this.storageBusiness.id,
				page: this.page,
				limit: this.limit,
				keyWord: this.keyWord
			}
			if (this.cate == 0) {
				let result = await uni.$u.http.post("/business/follow", data)
				if (result.code == 0) {
				} else {
					this.page++
					this.myConcernList.push(...result.data)
					this.triggered = false;
					this._freshing = false;
				}
			} else if (this.cate == 1) {
				let result = await uni.$u.http.post("/business/fan", data)
				if (result.code == 0) {
				} else {
					this.page++
					this.concernList.push(...result.data)
					this.triggered = false;
					this._freshing = false;
				}
			} 
		},
		deleteThis(id){
			this.deleteid = id
			this.show = true
		},
		search(){
			this.onRefresh()
			this.keyWord = ''
		},
		goCenter(busid){
			uni.$u.route({
				url:"/pages/business/center",
				params:{busid}
			})
		}
	}
}
</script>

<style>
.content {
	width: 100%;
	overflow-x: hidden;
}

.search {
	height: 238rpx;
	background-image: url("/static/titlebg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	padding: 0 28rpx;
	display: flex;
	align-items: center;
	align-content: center;
}

.search-area {
	width: 100%;
	height: 88rpx;
	background-color: #fff;
	background-image: url("/static/search.png");
	background-repeat: no-repeat;
	background-size: 30rpx 30rpx;
	background-position: 35rpx 30rpx;
	border-radius: 11rpx;
	line-height: 88rpx;
	text-indent: 78rpx;
	color: #2f2e2e;
	font-size: 30rpx;
}

.nav {
	display: flex;
	background-color: #f1f6f9;
	position: relative;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.nav .nav-item {
	height: 110rpx;
	line-height: 110rpx;
	text-align: center;
	color: #666;
	font-size: 30rpx;
}

.nav .active {
	color: #000;
	font-weight: 600;
}

.nav .active-line {
	background-color: #038fff;
	width: 35rpx;
	height: 4rpx;
	position: absolute;
	top: 86rpx;
	transition: left 0.2s;
}

.list .item {
	display: flex;
	width: 95%;
	margin: 10px auto;
}

.business {
	width: 20%;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 10px;
	margin-right: 10px;
}

.avatar {
	width: 100%;
	height: 5em;
}

.avatar image {
	width: 100%;
	height: 100%;
}

.info {
	font-size: .9em;
	color: #999;
}

.info .nickname,
.info .desc {
	margin-bottom: 2px;
}

.info .nickname {
	font-size: 1.1em;
	width: 95%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #000;
	font-weight: bold;
}

.info .desc {
	font-size: .8em;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/* 改成你需要的行数 */
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
</style>
